import { Component, For } from 'solid-js';
import { useHomeStore } from './store';
import HomeCarousel from '@/components/HomeCarousel';
import HomeListApps from '@/components/HomeListApps';

const Home: Component = () => {
  const { lists, loading, slides } = useHomeStore();

  return (
    <div class="p-6 w-full h-full">
      <HomeCarousel slides={slides() ?? []} loading={loading()} class='pb-2'/>
      {loading() ? (
        <For each={Array(2).fill(0)}>
          {() => (
            <HomeListApps
              title=""
              apps={[]}
              loading={true}
            />
          )}
        </For>
      ) : (
        <For each={lists() ?? []}>
          {(list) => (
            <HomeListApps
              title={list.title}
              apps={list.apps}
              loading={loading()}
            />
          )}
        </For>
      )}
    </div>
  );
};

export default Home;